import React, { Component } from 'react';

const white = "白";
const red = "红";
const green = "绿";
const blue = "蓝";
const yellow = "黄";
const orange = "橙";

class CubeFace extends Component {
  state = {
    showSelectColor: false,
  }
  getColor = (data) => {
    if(data === white) return "white";
    if(data === red) return "red";
    if(data === green) return "green";
    if(data === blue) return "blue";
    if(data === yellow) return "yellow";
    if(data === orange) return "orange";
    return "black";
  }
  setColor = () => {
    this.setState({
      showSelectColor: true,
    })
  }
  selectColor = (e) => {
    this.setState({
      showSelectColor: false,
    })
    this.props.setColor(this.props.no, e.target.textContent);
  }
  isDefaultColor = (color, defaultColor) => {
    if(color === defaultColor) return "selected";
    return "";
  }
  render () {
    let divStyle = {
      width: "20px",
      height: "20px",
      backgroundColor: this.getColor(this.props.color),  //驼峰法
    };
    let divStyleWhite = {
      width: "20px",
      height: "20px",
      backgroundColor: this.getColor(white),
    };
    let divStyleRed = {
      width: "20px",
      height: "20px",
      backgroundColor: this.getColor(red),
    };
    let divStyleGreen = {
      width: "20px",
      height: "20px",
      backgroundColor: this.getColor(green),
    };
    let divStyleBlue = {
      width: "20px",
      height: "20px",
      backgroundColor: this.getColor(blue),
    };
    let divStyleYellow = {
      width: "20px",
      height: "20px",
      backgroundColor: this.getColor(yellow),
    };
    let divStyleOrange = {
      width: "20px",
      height: "20px",
      backgroundColor: this.getColor(orange),
    };
    let isSelectColor = this.state.showSelectColor === true ? "block" : "none";
    return (
      <div>
        <div style={divStyle} onClick={this.setColor}></div>
        <div style={{display: `${isSelectColor}`}}>
          <div style={divStyleWhite} onClick={this.selectColor}>{white}</div>
          <div style={divStyleRed} onClick={this.selectColor}>{red}</div>
          <div style={divStyleGreen} onClick={this.selectColor}>{green}</div>
          <div style={divStyleBlue} onClick={this.selectColor}>{blue}</div>
          <div style={divStyleYellow} onClick={this.selectColor}>{yellow}</div>
          <div style={divStyleOrange} onClick={this.selectColor}>{orange}</div>
        </div>
      </div>
    )
  }
}

export default CubeFace;
